import React from 'react'
import ReactDOM from 'react-dom';
import '../css/touch.less'
import Screen from '../components/screen';
import IO from 'SocketClient/socket.io.js';
import {host} from '../config/host'
export default class Main extends React.Component{
    constructor(props) {
        super(props)
        this.state =  {
            dataready: false,
	          action: {}
        }
    }
    componentDidMount () {
      // connedt to server by socket.io
      this.config = IO.connect(`http://${host}/config`);
      this.messagecenter = IO.connect(`http://${host}/messageCenter2`);


			// {areaType, screenIndex, mediaType, mediaURL}
      this.messagecenter.on('showAction', (res) => {
        this.setState({
          action: res,
	        dataready: true
        })
      });
    }
    totalScreen = () => {
				let areaType = this.state.action.areaType;
				if(areaType === undefined) return 0;
	      return areaType.replace('split-', '')
    }
    render() {
        // let screenTotal = this.action.
        console.log(this.state, this.props)
        let screens = []
        const action1 = {
          areaType: "split-3",
          mediaType: "video",
          mediaURL: "http://wow.techbrood.com/uploads/1705/ocean-small.webm",
          screenIndex: 0
        }
        const action2 = {
          areaType: "split-3",
          mediaType: "image",
          mediaURL: "/fg.jpg",
          screenIndex: 0
        }
        screens.push(<Screen title="固定区A" localScreenIndex={0} key={0} {...action1}/>)
        screens.push(<Screen title="固定区B" localScreenIndex={1} key={1} {...action2}/>)
	      //  for (let i=0; i< this.totalScreen(); i++) {
	      	screens.push(<Screen title="触控区" localScreenIndex={2} key={2} {...this.state.action}/>)
	      // }
        return <div className="container-touch">
                  {!this.state.dataready && <div className='loading'>正在等待传入操作信号....</div>}
                  {this.state.dataready && screens}
              </div>
    }
}

